<template>
  <div class="container">
    <a-row type="flex" justify="center" align="middle" style="height: 100%">
      <a-col class="box-form">
        <a-row>
          <a-col class="form-title">夏之家院</a-col>
        </a-row>
        <a-row>
          <a-col>
            <a-input style="height: 2.5rem;" v-model='userName' type='primary' placeholder="请输入账号"></a-input>
          </a-col>
        </a-row>
        <a-row style="margin-top: 2.5rem;">
          <a-col>
            <a-input style="height: 2.5rem;"  v-model='password' type='primary' placeholder="请输入密码"></a-input>
          </a-col>
        </a-row>
        <a-row style="margin-top: 1rem;">
          <a-col style="text-align: right; color: white;">
            忘记密码
          </a-col>
        </a-row>
        <a-row style="margin-top: 2.5rem;">
          <a-col>
            <a-button @click='loginUser' type='primary' style="height: 2.5rem; font-weight: bold; width: 100%; background-color: white; color: blue;">登录</a-button>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      userName: 'admin',
      password: '123456'
    }
  },
  methods: {
    ...mapActions('user', ['LOGIN_CHECK_METHOD']),
    async loginUser () {
      if (!this.userName.trim()) return this.$message.info('请输入用户名')
      if (!this.password.trim()) return this.$message.info('请输入密码')
      const params = {
        username: this.userName,
        password: this.password
      }
      this.LOGIN_CHECK_METHOD(params)
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
  width: 100%;
  height: 100%;
  background-image: url('~@/assets/loginBg.png');
  background-size: cover;
  background-position: center bottom;

  .box-form{
    background-color: #1C5890;
    height: 40%;
    box-sizing: border-box;
    padding: 1rem 3rem;
    border-radius: 2rem;
    width: 50%;
    height: 50%;
    max-width: 370px;
    max-height: 400px;
    min-width: 300px;
    min-height: 300px;

    .form-title{
      font-size: 30px;
      font-weight: bold;
      color: white;
      margin-bottom: 2rem;
    }
  }
}
</style>
